import React, { useEffect, useContext } from 'react';
import { IonButton, IonButtons, IonContent, IonHeader, IonLabel, IonMenuButton, IonPage, IonRouterContext, IonTitle, IonToolbar } from '@ionic/react';

interface RedirectToLoginProps {
  setIsLoggedIn: Function;
  setUsername: Function;
}

const RedirectToLogin: React.FC<RedirectToLoginProps> = ({ setIsLoggedIn, setUsername }) => {
  const ionRouterContext = useContext(IonRouterContext);
  // useEffect(() => {
  //   setIsLoggedIn(false);
  //   setUsername(undefined);
  //   ionRouterContext.push('/tabs/schedule')
  // }, [setIsLoggedIn, setUsername, ionRouterContext]);

  // return null;

  const gohome = async (e: React.FormEvent) => {
    e.preventDefault();
    setIsLoggedIn(false);
    setUsername(undefined);
    ionRouterContext.push('/tabs/schedule')
  };

  return (
    <IonPage id="logout-page">
      <IonHeader>
        <IonToolbar>
          <IonButtons slot="start">
            <IonMenuButton></IonMenuButton>
          </IonButtons>
          <IonTitle>logout</IonTitle>
        </IonToolbar>
      </IonHeader>
      <IonContent>
        <IonLabel>您已退出登录</IonLabel>
        <IonButton onClick={gohome} color="light" expand="block">返回首页</IonButton>
      </IonContent>
    </IonPage>
  );
};

export default RedirectToLogin;
